/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/21 Time: 22:32
 */

import {StyleSheet} from 'react-native';
import {COLOR_GRAY_LINE, COLOR_THEME, COLOR_WHITE, FONT_COLOR_TITLE} from "../../../constant/PHColors"
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../../constant/PHScreen"

export const styles = StyleSheet.create({

  container: {
    flex: 1
  },

  topViewContainer: {
    height: 256,
    justifyContent: 'center',
    alignItems: 'center'
  },

  topImage: {
    width: 78,
    height: 92
  },

  bottomView: {
    height: 140,
    justifyContent: 'center',
    alignItems: 'center'
  },

  bottomText: {
    fontSize: 14
  },

  centerView: {
    height: 212,
    marginLeft: 25,
    marginRight: 25
  },

  textInputContainer: {
    height: 42,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 21,
    borderColor: COLOR_GRAY_LINE,
    borderWidth: 1
  },

  usernameImage: {
    width: 24,
    height: 24,
    marginLeft: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },

  showMoreImage: {
    width: 24,
    height: 24,
    marginRight: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },

  usernameContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    marginLeft: 10
  },

  loginContainer: {
    height: 40,
    backgroundColor: 'blue',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 26
  },

  loginText: {
    fontSize: 15,
    fontWeight: 'bold',
    color: COLOR_WHITE
  },

  underLoginView: {
    height: 20,
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 14
  },

  underLoginLeft: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },

    modalUnderLoginLeft: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginRight:5
    },

  underLoginRight: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },

    modalUnderLoginRight: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginLeft:5
    },

    underLoginRightT: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginTop:15,
        marginRight:10,
    },

  rememberText: {
    fontSize: 14,
    color: FONT_COLOR_TITLE,
    marginLeft: 5
  },

  forgetText: {
    fontSize: 14,
    color: FONT_COLOR_TITLE,
  },

  chooseAccountText: {
      fontSize:18,
      color:'#4C70FF',
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'flex-end',
  },

  userImage: {
    width: 18,
    height: 20
  },

  input: {
    width: SCREEN_WIDTH - 140
  },

    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
    },

    modalBox:{
        alignItems:'center',
        backgroundColor:'white',
        marginTop: 120,
        marginLeft: SCREEN_WIDTH/18,
        marginRight: SCREEN_WIDTH/18,
        width: SCREEN_WIDTH*16/18,
        height:280,
        borderRadius:3,
    },

    modalTitle:{
        borderBottomColor:'#4C70FF',
        borderBottomWidth:2,
        height:40,
        width:SCREEN_WIDTH*16/18,
        alignItems:'center',
        justifyContent:'center',
    },

    modalTitleTextNum:{
        fontSize:18,
        color:'#4C70FF',
    },

    modalCenter:{
        alignItems:'center',
        justifyContent:'space-between',
        flexDirection:'column',
        paddingTop:10,
        paddingBottom:10,
    },

    modalCenterText:{
        fontSize:18,
        color: '#6e6e6e',
    },

    modalInput:{
        backgroundColor:'transparent',
        fontSize:15,
        paddingTop: 0,
        paddingBottom: 0,
        paddingLeft: 5,
        marginLeft:15,
        marginRight:15,
        width:100,
        height:30,
        borderWidth: 1,
        borderColor:"#aaaaaa"
    },

    modalBottom:{
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row',
        marginBottom:5,
    },

    modalBottomLeft:{
        marginLeft:2,
        width:((SCREEN_WIDTH*16/18)-6)/2,
        backgroundColor:'#cdcdcd',
        height:45,
        borderRadius: 2,
        alignItems:'center',
        justifyContent: 'center',
    },

    modalBottomLeftText: {
        fontSize: 20,
        color: '#6e6e6e',
        marginBottom: 1,
        textAlign:'center',
    },

    modalBottomRight:{
        marginLeft:2,
        width:((SCREEN_WIDTH*16/18)-6)/2,
        backgroundColor:'#2f67ff',
        height:45,
        borderRadius: 2,
        alignItems:'center',
        justifyContent: 'center',
    },

    modalBottomRightText: {
        fontSize: 20,
        color: '#ffffff',
        marginBottom: 1,
        textAlign:'center',
    },

    saveSetUp: {
        height: 35,
        width:((SCREEN_WIDTH*16/18)-6)/3,
        backgroundColor: 'blue',
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10
    },
    saveSetUpText: {
        fontSize: 15,
        fontWeight: 'bold',
        color: COLOR_WHITE
    },
});